<%@ page language="java" import="java.util.*"
         contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/context/mytags.jsp"%>
<!DOCTYPE html>
<html>
<head>
    <title>${roomName}测试</title>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/plug-in/ueditor/ueditor.config.js"></script>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/plug-in/ueditor/ueditor.all.js"></script>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/plug-in/ueditor/lang/zh-cn/zh-cn.js"></script>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/plug-in/ueditor/third-party/jquery-1.10.2.min.js"></script>
    <style type="text/css">
        .msg {
            margin-top: 5px;
        }
        .dateString {
            margin-left:5px;
            color: #d4d4d4;
        }
    </style>
    <t:base type="jquery,easyui,tools,DatePicker"></t:base>
</head>
<body style="overflow-y: hidden" scroll="no">
<input type="hidden" id="roomId" name="roomId" value="${roomId}" />
<input type="hidden" id="msgIds" name="msgIds"/>
<!-- 消息记录 -->
<div id="history" style="width:630px;height:300px;border:1px #d4d4d4 solid;padding:10px;overflow-y:scroll;word-wrap:break-word;word-break:break-all;text-indent:2em;" ></div>
<!-- 消息 -->
<div id="msgBox"></div>
<!-- 按钮 -->
<div style="width: 650px; text-align: right; margin-top: 2px;">
    <input type="button" id="send" name="send" value="发送" />
    <input type="button" id="clear" name="clear" value="清空" />
</div>
</body>

<script type="text/javascript">
    //消息发送窗口
    var $editor = new UE.ui.Editor({
        initialFrameHeight : 150,
        initialFrameWidth : 650,
        scaleEnabled : true,
        emotionLocalization:true,
        enableAutoSave:false,
        elementPathEnabled:false,
        wordCount:false,
        toolbars: [[
            'source', 'bold', 'italic', 'underline', 'forecolor', 'backcolor','fontfamily', 'fontsize', '|',
            'touppercase', 'tolowercase', 'simpleupload', 'insertimage', 'emotion', 'spechars'
        ]]
    });
    $editor.render("msgBox");

    var $history = $('#history');
    var $msgBox = $('#msgBox');
    var $roomId = $('#roomId');
    var $msgIds = $('#msgIds');
    //是否自动滚动到最新消息
    var isAutoScroll = true;

    //进入该页面就先调用一次查询数据信息
    getAnalyzeMsg();
    //每隔3s获取一次解盘消息数据信息
    var timer = window.setInterval(getAnalyzeMsg, 3000);

    //清空按钮
    $('#clear').click(function() {
        //清空编辑器内容
        $editor.execCommand('cleardoc');
    });

    $('#send').click(function() {
        if (!$editor.hasContents()) {
            alert('待发送消息为空!');
            return;
        }
        var content = $editor.getContent();
        if(content.length > 5000){
            alert('内容长度过大！');
            return;
        }
        //添加到数据库
        var uri = "analyzeMsgController.do?saveMsg";

        $('#send').attr("disabled","disabled");
        $.ajax({
            type : 'POST',
            url : uri,
            data : {roomId:$('#roomId').val(),content:content},
            success : function(data) {
                var jsonData = eval('(' + data + ')');
                if(!jsonData.success){
                    alert(jsonData.msg);
                    return;
                }
// 				getAnalyzeMsg();
                //清空编辑器内容
                $editor.execCommand('cleardoc');
            },
            complete : function() {
                $('#send').removeAttr("disabled");
            }
        });
    });

    //从库中取出消息
    function getAnalyzeMsg() {
        var msgIdVal = $msgIds.val();
        var msgIdArr = msgIdVal.split(",");
        if(msgIdArr.length > 20){
            //剔除超过20条信息的ID
            msgIdVal = msgIdArr.slice(0,20).join(",");
        }
        var uri = "analyzeMsgController.do?getMsg";
        $.ajax({
            url : uri,
            data : {roomId:$roomId.val(),msgIds:msgIdVal},
            success : function(data) {
                var jsonData = eval('(' + data + ')');
                $history.append(jsonData.attributes.msg);
                $msgIds.val(jsonData.attributes.msgIds);
                if(isAutoScroll){
                    $history.scrollTop($history[0].scrollHeight);
                }
            },
            error : function(){
                clearInterval(timer);
            }
        });
    }

    $history.scroll(function(){
        var htmlHeight = $history[0].scrollHeight;
        var clientHeight = $history[0].clientHeight;
        var scrollTop = $history[0].scrollTop;
        if((scrollTop+clientHeight) < htmlHeight){
            isAutoScroll = false;
        }else{
            isAutoScroll = true;
        }
    });
</script>